<template>
  <!--公用弹框-->
  <div>
    <div id="alertModel" class="alertModel" v-show='alerts.length'>
      <div class="alertBox fadeInDown">
        <h2 class="textTitle">
          <my-title :title='"温馨提示"'></my-title>
          <i class="iconfont iconCancel cursor" @click="close()">&#xe73e;</i>
        </h2>
        <div class="alertContent">
          <div class="alertText textCenter">
            <i class="iconfont icon-normal" v-show="/^[1][0-9]{4}/.test(resCode)">&#xe603;</i>
            <i class="iconfont " v-show="/^[0][0-9]{3}[1-9]{1}$/.test(resCode)">&#xe602;</i>
            <span class="text">{{text}}</span>
          </div>
          <div class="textCenter">
            <button type="button" class="btn btnCancel cursor" ref='no' @click="close('no')" v-show="btnCancel">
              取消
            </button>
            <button type="button" class="btn cursor" v-focus ref='yes' @click="close('yes')">
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  /* eslint-disable no-undef */
  import myTitle from '@/base/title/title'
  import Vue from 'vue'

  export default {
    name: 'alert',
    data () {
      return {
        alerts: [],
        text: '我是文字',
        resCode: '',
        btnCancel: false
      }
    },
    mounted: function () {
      Vue.prototype.alert = (setting) => {
        this.alerts.push({})
        this.text = setting.text
        this.resCode = setting.resCode
        this.btnCancel = setting.btnCancel
        return new Promise((resolve, reject) => {
          this.$refs.yes.onclick = () => {
            resolve(this.text)
          }
          this.$refs.no.onclick = () => {
            // reject(this.text)
          }
        })
      }
    },
    methods: {
      close: function (v) {
        this.alerts = []
      }
    },
    directives: {
      focus: {
        inserted: function (el) {
          // 聚焦元素
          el.focus()
        }
      }
    },
    components: {
      'my-title': myTitle
    }
  }
</script>
<!--Add "scoped" attribute to limit CSS to this component only-->
<style scoped lang="stylus">
  @import '~@/assets/css/variable'
  .alertModel
    width 100%
    height 100%
    position fixed
    left 0
    top 0
    background rgba(0, 0, 0, 0.4)
    z-index 999999
    display block
    .alertBox
      min-width 460px
      box-sizing border-box
      background #fff
      position absolute
      left 50%
      top 30%
      padding 0px 25px 30px 25px
      border-radius 10px
      -webkit-transform translate(-50%, 0%)
      transform translate(-50%, 0%)
      box-shadow 0px 1px 1px 1px rgba(0, 0, 0, 0.2)
      .textTitle
        width 100%
        font-size 16px
        color $color-yellow
        padding 10px 0 15px 15px
        letter-spacing 1
        position relative
        display inline-block
        box-sizing border-box
        margin-top 15px
        .icon-cancel
          position absolute
          right -15px
          top 9px
          width 32px
          height 32px
          text-align center
          vertical-align middle
        .iconfont
          color #F9C91C
          font-family 'iconfont' !important
          font-size 16px
          font-style normal
          -webkit-font-smoothing antialiased
          -moz-osx-font-smoothing grayscale
        .iconCancel
          position absolute
          right -15px
          top 9px
          width 32px
          height 32px
          text-align center
          vertical-align middle
        .iconfont
          margin-right 5px
          display inline-block
          vertical-align middle
      .alertContent
        .alertText
          padding 18px 0 30px
          i
            width 70px
            /* height: 70px; */
            margin-left 2px
            font-size 43px
            color red
            vertical-align top
            position absolute
            left 7px
            top 47%
            transform translateY(-50%)
            -webkit-transform translateY(-50%)
            -o-transform translateY(-50%)
            -moz-transform translateY(-50%)
            -ms-transform translateY(-50%)
          .icon-normal
            color: #00AF00
          .text
            font-size 20px
            color #5f5e5e
            margin-left 33px
            width 85%
            line-height 35px
            display inline-block
        .textCenter
          .btn
            background-color $color-ack-button
            height 35px
            font-size 12px
            color #393d40
            box-sizing border-box
            letter-spacing 1
            padding 6px 22px
            border 1px solid $color-ack-button
            margin-left 30px
            border-radius 52px
            padding 10px 30px
            color #fff
          .btn:focus
            outline 0
          .btnCancel
            background-color #fff
            color $color-ack-button
</style>
